<template>
  <div class="box">
        <div class="box-a">
            <p class="a-p1">可用积分</p>
            <p class="a-p2">3680</p>
        </div>
        <!-- 间隔一 -->
        <span class="box-span1">2019年9月</span>
        <!-- 第二部分 -->
        <div class="box-b">
            <div class="b1">
                <div class="b1a">
                    <span class="b1-span1">外卖下单</span>
                    <span class="b1-span2">2019-09-16 12:00</span>
                </div>
                <span class="b1-span3">+60</span>
            </div>
            <div class="b2">
                <div class="b2a">
                    <span class="b2-span1">积分兑换</span>
                    <span class="b2-span2">2019-09-09 17:20</span>
                </div>
                <span class="b2-span3">-30</span>
            </div>
            <div class="b3">
                <div class="b3a">
                    <span class="b3-span1">食堂下单</span>
                    <span class="b3-span2">2019-09-08 18:56</span>
                </div>
                <span class="b3-span3">-50</span>
            </div>
            <div class="b4">
                <div class="b4a">
                    <span class="b4-span1">积分兑换</span>
                    <span class="b4-span2">2019-09-06 12:30</span>
                </div>
                <span class="b4-span3">-50</span>
            </div>
        </div>
        <!-- 间隔2 -->
        <span class="box-span2">2019年8月</span>
        <!-- 第三部分 -->
        <div class="box-c">
            <div class="c1">
                <div class="c1a">
                    <span class="c1-span1">外卖下单</span>
                    <span class="c1-span2">2019-08-16 12:00</span>
                </div>
                <span class="c1-span3">+60</span>
            </div>
            <div class="c2">
                <div class="c2a">
                    <span class="c2-span1">积分兑换</span>
                    <span class="c2-span2">2019-08-09 17:20</span>
                </div>
                <span class="c2-span3">-30</span>
            </div>
        </div>

    </div>
</template>

<script>

export default {
  data () {
    return {
      
      }
    },

  methods: {
   
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
        .box {
            width: 375px;
            height: 667px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            background: rgba(225, 225, 225, 1);
        }

        /* 第一区块 */
        .box-a {
            width: 375px;
            height: 190px;
            background: rgb(70, 150, 106);
            padding-left: 22px;
            box-sizing: border-box;
        }

        .a-p1 {
            margin-top: 83px;
            width: 70px;
            height: 14px;
            font-size: 16px;
            font-weight: 400;
            color: rgba(253, 253, 254, 1);
            line-height: 19px;
            opacity: 0.8;
        }

        .a-p2 {
            margin-top: 27px;
            width: 100px;
            height: 35px;
            font-size: 45px;
            font-weight: 500;
            color: rgba(253, 253, 254, 1);
            line-height: 49px;
        }

        /* 第一隔间 */
        .box-span1 {
            margin-left: 13px;
            width: 70px;
            height: 34px;
            line-height: 34px;
            font-size: 13px;
            font-weight: 400;
            color: rgba(133, 132, 132, 1);
        }

        /* 第二,三区块 */
        .box-b,
        .box-c {
            width: 100%;
            height: 261px;
            display: flex;
            flex-direction: column;
            background: rgba(255, 255, 255, 1);
        }

        .box-c {
            height: 147px;
        }

        .b1,
        .b2,
        .b3,
        .b4,
        .c1,
        .c2 {
            width: 100%;
            height: 68px;
            display: flex;
            justify-content: space-between;
            padding-left: 12px;
            padding-right: 20px;
            box-sizing: border-box;

        }

        .c1 {
            height: 68px;
        }

        .c2 {
            height: 79px;
        }

        /* 左 */
        .b1a,
        .b2a,
        .b3a,
        .b4a,
        .c1a,
        .c2a {
            width: 50%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            border-bottom: 0.5px solid rgba(225, 225, 225, 1);
        }

        .b1-span1,
        .b2-span1,
        .b3-span1,
        .b4-span1,
        .c1-span1,
        .c2-span1 {
            margin-top: 15px;
            font-size: 14px;
            font-weight: 400;
            color: rgba(53, 52, 52, 1);
        }

        .b1-span2,
        .b2-span2,
        .b3-span2,
        .b4-span2,
        .c1-span2,
        .c2-span2 {
            margin-top: 5px;
            font-size: 12px;
            font-weight: 400;
            color: rgba(163, 165, 168, 1);
        }

        .b1-span3,
        .b2-span3,
        .b3-span3,
        .b4-span3,
        .c1-span3,
        .c2-span3 {
            width: 50%;
            height: 100%;
            display: flex;
            justify-content: flex-end;
            padding-top: 30px;
            box-sizing: border-box;
            font-size: 17px;
            font-weight: 400;
            color: rgba(53, 52, 52, 1);
            border-bottom: 0.5px solid rgba(225, 225, 225, 1);
        }

        .b1-span3,
        .c1-span3 {
            color: rgba(239, 103, 93, 1);
        }

        .box-span2 {
            margin-left: 13px;
            height: 34px;
            font-size: 13px;
            font-weight: 400;
            color: rgba(133, 132, 132, 1);
            line-height: 34px;
        }
    </style>
